.navigation {
  $large-screen: 53.75em !default;
  $large-screen: $large-screen;

  // Mobile view
  .navigation-menu-button {
    display: block;
    float: right;
    margin: 0;
    padding-top: 0.5em;

    @include media ($large-screen) {
      display: none;
    }
  }

  // Nav menu
  .navigation-wrapper {
    @include clearfix;
    position: relative;
  }

  .logo {
    float: left;

    img {
      max-height: 2em;
      padding-right: 1em;
    }
  }

  nav {
    float: none;

    @include media ($large-screen) {
      float: left;
      line-height: 1.5em;
      padding-top: 0.3em;
    }
  }

  ul.navigation-menu {
    clear: both;
    display: none;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    width: 100%;

    @include media ($large-screen) {
      display: block;
      margin: 0;
      padding: 0;
    }

    &.show {
      display: block;
    }
  }

  // Nav items
  ul li.nav-link {
    display: block;
    text-align: right;
    width: 100%;

    @include media ($large-screen) {
      background: transparent;
      display: inline;
      text-decoration: none;
      width: auto;
    }
  }

  li.nav-link a {
    display: inline-block;

    @include media ($large-screen) {
      padding-right: 1em;
    }
  }
}
